<template>
  <div class="auto_tag">
    <div class="auto_tag_left">
      <el-tabs v-model="activeName" class="auto_tag_tabs" @tab-remove="removeTab" :closable="tag.length > 1">
        <el-tab-pane v-for="(item, index) in tag" :label="`规则${index + 1}`" :name="`${index}`">
          <el-form label-width="auto">
            <el-form-item label="标签规则">
              <el-radio-group v-model="item.type">
                <el-radio :label="1" :disabled="isActivity"> 参与者打标 </el-radio>
                <el-radio :label="4"> 助力者打标 </el-radio>
                <el-radio :label="5"> 中奖者打标 </el-radio>
                <el-radio :label="6"> 领奖者打标 </el-radio>
                <!-- <el-radio :label="1" :disabled="isActivity">
                  <Popover text="活动客户" content="参与当前活动的客户打标签" />
                </el-radio> -->
                <el-radio :label="2">
                  <Popover text="邀请人数" content="当前助力者超过一定数量打标签" />
                </el-radio>
                <el-radio :label="3" :disabled="isRewardName">
                  <Popover text="奖品" content="中奖的客户打标签" />
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="item.type == 2" label="邀请人数">
              <el-input-number v-model="item.assist_num" size="small" :controls="false" placeholder="请输入" :precision="0" :min="1" />
              邀请人数大于等于该人数，将自动打上以下所选标签
            </el-form-item>
            <el-form-item v-if="item.type == 3" label="选择奖品" required>
              <el-select v-model="item.reward_name" size="small" placeholder="请选择">
                <el-option v-for="item in rewardNameOptions" :key="item" :label="item" :value="item" :disabled="rewardName.includes(item)"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择标签" required>
              <div class="zw-el-tags">
                <el-tag v-for="(tag,tagIndex) in tagList[index]" :key="tag"
                  @close="onClose1(tagIndex)" :closable="true" class="tagsItem">
                  {{ tag.name }}
                </el-tag>
              </div>
              <el-button @click="selecTag">选择标签</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="auto_tag_right">
      <el-button size="small" plain @click="onAddRule" :disabled="false">添加规则</el-button>
    </div>
  </div>
  <BatchLabel :titleVisible="false" ref="BatchLabelRef" @save="getTags" />
</template>

<script setup lang="ts">
  import BatchLabel from '@/components/BatchLabel.vue'
  import Popover from './Popover.vue'

  import { getSetionId } from '@/utils/utils'
  import bus from '@/utils/bus'
  import { ElMessage } from 'element-plus'
  import { ref, onUnmounted, computed, nextTick } from 'vue'
  const activeName = ref('0')
  const tag = ref([{ sort: 1, type: 1, assist_num: 1, reward_name: '', tag_ids: [] }])
  // 奖品名称
  const rewardNameOptions = ref<any>([])
  bus.on('stepTwo', (v) => {
    rewardNameOptions.value = v.slice(1).map((item: any) => item.reward_title) || []
    let str = ''
    rewardNameOptions.value.forEach((item: any) => {
      str += item
    })

    // 设置过的奖品名称是否还存在
    tag.value.forEach((item: any) => {
      if (item.reward_name) {
        if (!str.includes(item.reward_name)) {
          item.reward_name = ''
        }
      }
    })
  })

  // 活动客户是否被选过
  const isActivity = computed(() => {
    return tag.value.some((item: any) => item.type == 1)
  })

  // 已选择过的奖品名称
  const rewardName = computed(() => {
    return tag.value.filter((item: any) => item.type == 3).map((item: any) => item.reward_name)
  })

  // 奖品名称是否全部都被选过
  const isRewardName = computed(() => {
    console.log(rewardNameOptions.value.length, rewardName.value.length, "奖品")
    return rewardNameOptions.value.length == rewardName.value.length
  })

  // 添加规则
  const onAddRule = () => {
    if (tag.value.length < 30) {
      tag.value.push({ sort: 1, type: isActivity ? 2 : 1, assist_num: 1, reward_name: '', tag_ids: [] })
      tagList.value.push([])
      activeName.value = (tag.value.length - 1).toString()
    } else {
      ElMessage.error('最多添加30条规则')
    }
  }

  // 删除规则
  const removeTab = (v: any) => {
    activeName.value = (tag.value.length - 2).toString()
    nextTick(() => {
      tagList.value.splice(v, 1)
      tag.value.splice(v, 1)
    })
  }

  // 选择标签
  const tagList = ref([[]])
  const BatchLabelRef: any = ref<any>(null) //
  const selecTag = () => {
    BatchLabelRef.value.hasConditiion = false
    BatchLabelRef.value.dialogData.labelChooseType = 2
    BatchLabelRef.value.chooseDataArr = []
    BatchLabelRef.value.chooseDataArr = [...tagList.value[activeName.value]]
    BatchLabelRef.value.dialogVisible = true
  }
  // 获取标签
  const getTags = (data: any) => {
    tagList.value[activeName.value] = data.data
    tag.value[activeName.value].tag_ids = getSetionId('id', data.data)
  }
  // 移除标签
  const onClose1 = (tagIndex: any) => {
    tagList.value[activeName.value].splice(tagIndex, 1)
    tag.value[activeName.value].tag_ids = getSetionId('id', tagList.value[activeName.value])
  }
  bus.on('tagLook', (v) => {
    console.log('标签返回', v)
    tag.value = v
    for (let i = 0; i < tag.value.length; i++) {
      tagList.value[i] = v[i].tag_ids
      tag.value[i].tag_ids = getSetionId('id', v[i].tag_ids)
    }
  })
  // 解绑事件
  onUnmounted(() => {
    bus.off('stepTwo')
    bus.off('tagLook')
  })

  defineExpose({
    tag,
    activeName
  })
</script>

<style scoped lang="scss">
  .auto_tag {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 1000px;
    padding: 10px 20px;
    margin-left: 12px;
    border: 1px solid #e4e7ed;
    position: relative;

    // 伪元素覆盖原有边框
    &::before {
      content: '';
      position: absolute;
      top: 48px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #e4e7ed;
    }

    .auto_tag_left {
      flex: 1;
      margin-right: 20px;

      .auto_tag_tabs {
        width: 900px;
      }
    }

    .el-form-item {
      margin-bottom: 0;
    }
    .tagsItem {
      margin-right: 10px;
    }
  }
</style>
